<template>
	<div class="video-model">
		<div class="model-content">
			<!-- 头部部分 -->
			<div class="content-top">
				<div class="top">
					<image src="../../static/img/alarm-light.png" mode="" class="light-img"></image>
					<span class="top-title">视频报警信息</span>
					<div class="sound" v-if="isSpeaker" @click="closeVoice">
						<image src="../../static/img/music.png" mode=""></image>
						<span class="sound-text">关闭</span>
					</div>
					<div class="sound" v-else @click="openVoice">
						<image src="../../static/img/music-xiaoyin.png" mode=""></image>
						<span class="sound-text">开启</span>
					</div>
				</div>

			</div>
			<!-- 主体内容 -->
			<div class="dialog-main">
				<!-- 弹框左边内容 -->
				<div class="dialog-left">
					<!-- 异常记录板块 -->
					<div class="abnormal-record">
						<!--异常记录头部板块 -->
						<div class="record-top">
							<img class="top-logo" src="../../static/img/edit.png" alt="" />
							<span class="top-text">异常记录</span>
						</div>
						<!-- 异常记录列表部分 -->
						<div class="record-list">
							<div class="list-item pointer" :class="item.videoAlarmLogId===currentVideoSelect? 'active' : '' "
								v-for="item in videoLists" :key="item.id" @tap="toSelectVideo(item.videoAlarmLogId)">
								<div class="item-top">
									<div class="top-left">
										<div class="circle"></div>
										<div class="name">{{item.videoName}}</div>
									</div>
									<div class="top-right">{{item.updateTime}}</div>
								</div>
								<div class="item-bottom">
									<div class="bottom-left">
										<div class="type">{{item.alarmName}}</div>
									</div>
									<div class="bottom-right">
										<span>{{item.alarmCount}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 平面图板块 -->
					<!-- 平面图板块 -->
					<div class="plane-figure abnormal-record">
						<!-- 头部部分 -->
						<div class="figure-top record-top">
							<img class="top-logo" src="../../static/img/edit.png" alt="" />
							<span class="top-text">平面图</span>
						</div>
						<!-- 平面图展示部分 -->
						<div class="figure-model">
							<!-- 图片模型展示 -->
							<!-- 位置描述 -->
							<template v-if="currentVideoObj.image">
								<img :src="BaseUrl+'/admin/sys-file/' + currentVideoObj.image" alt=""  ref="model" />
								<div class="model-address">
									<img src="../../static/img/marker.png" alt="" />
									<span>{{ currentVideoObj.addressDesc }}</span>

								</div>
							</template>
							<template v-else>
								<div class="no-image" >
									<image src="../../static/img/no-alarm.png" alt="">
										<span>暂无关联平面图</span>
								</div>
							</template>
							<div class="alarm-marker"
								v-if="currentVideoObj.mark"
								:style="{'top':[currentVideoObj.mark[0]+'px'],'left':[currentVideoObj.mark[1]+'px']}">
								<image src="../../static/img/monitor2.png" mode=""></image>
								<!-- <img src="../../static/img/monitor-icon.png" alt="" srcset="" /> -->
							</div>
						</div>
					</div>
				</div>
				<!-- 弹框中间内容 -->
				<div class="dialog-middle">
					<div class="build-detail pointer" @click="toNewBuildDetail">
						<div class="build-name">
							<img src="../../static/img/floor.png" alt="" />
							<span>{{ currentVideoObj.buildName }}</span>

						</div>
						<div class="build-address">
							<img src="../../static/img/marker.png" />
							<span>{{ currentVideoObj.buildAddress }}</span>

						</div>
						<!-- 建筑详情按钮 -->
						<div class="to-detail pointer" title="建筑详情" v-if="currentVideoObj.buildAddress">
							<img src="../../static/img/detail.png" alt="" />
						</div>
					</div>
					<!-- 报警摄像头名称 -->
					<div class="montior-name">{{currentVideoObj.videoName}}</div>
					<!-- 视频报警主体部分 -->
					<div class="monitor-video">
						<div class="video-top">
							<!-- 播放视频盒子 -->
							<template v-if="videoPlatForm===1||videoPlatForm===4">

								<div class="content-left">

									<div class="video-container" id="video-container">

									</div>

								</div>
								<!-- 右边联动控制 -->
								<div class="content-right">
									<div class="right-title">云台控制</div>
									<!-- 控制器板块 -->
									<div class="right-contorll">
										<div class="small-contorll"></div>
										<div class="contorll-button">
											<img src="../../static/img/video-control-bottom.png" class="bottom pointer" alt=""
												@mousedown="startCtrl('1')" @mouseup="stopCtrl('1')" />
											<img src="../../static/img/video-control-left.png" class="left pointer other" alt=""
												@mousedown="startCtrl('2')" @mouseup="stopCtrl('2')" />
											<img src="../../static/img/video-control-right.png" class="right pointer other" alt=""
												@mousedown="startCtrl('3')" @mouseup="stopCtrl('3')" />
											<img src="../../static/img/video-control-top.png" class="top pointer" alt=""
												@mousedown="startCtrl('0')" @mouseup="stopCtrl('0')" />
										</div>
									</div>
									<!-- 控制器说明 -->
									<div class="right-contorll-desc">
										<div>点击方向按钮</div>
										<div>可查看不同方向的监控视频</div>
									</div>
									<!-- 底部控制按钮 -->
									<div class="bottom-button">
										<!-- 对话按钮 -->
										<div class="button-all pointer" @click="callcapture">
											<div class="speak button-item">
												<div class="small-button">
													<image :src="sperkPng" mode=""></image>
												</div>
											</div>
											<div class="item-text">点击对讲</div>
										</div>
										<!-- 截图按钮 -->
										<div class="button-all pointer" @click="imgcapture">
											<div class="button-item">
												<div class="small-button screenshot">
													<image src="../../static/jieping.png" mode=""></image>
												</div>
											</div>
											<div class="item-text">点击截图</div>
										</div>
										<!-- 录像按钮 -->
										<div class="button-all pointer" @click="videocapture">
											<div class="button-item">
												<div class="small-button video">
													<image :src="videoPng" mode=""></image>
												</div>
											</div>
											<div class="item-text">点击录像</div>
										</div>
									</div>
								</div>
							</template>

							<template v-else>
								<div class="leftLoading">
									<image class="imgVideo" src="../../static/img/loadingVideo.png" mode=""></image>
								</div>
								<div class="video-container1" id="video-container1">
								</div>
							</template>


						</div>
						<div class="video-bottom">
							<div class="bottom-btns">
								<!-- <div class="btn-item pointer">
									<image src="../../static/img/contingencyplan.png" mode=""></image>
									<span>应急预案</span>
								</div> -->
								<div class="btn-item yellow pointer" @click="toDealrError">
									<image src="../../static/img/wubao.png" mode=""></image>
									<span>误报</span>
								</div>
								<!-- <div class="btn-item blue pointer">
									<image src="../../static/img/liandongkongzhi.png" mode=""></image>
									<span>联动控制</span>
								</div> -->
							</div>
						</div>
					</div>
				</div>

				<!-- {{ detailObj.videoName }} -->
				<!-- 弹框右边内容 -->
				<div class="dialog-right dialog-left">
					<!-- 推送记录板块 -->
					<div class="abnormal-record">
						<!--异常记录头部板块 -->
						<div class="record-top">
							<img class="top-logo" src="../../static/img/edit.png" alt="" />
							<span class="top-text">推送记录</span>
						</div>

						<div class="push-record-list">
							<template v-if="pushLogDatas.length>=1">
								<scroll-view scroll-y="true" style="height:150px;" @scrolltolower="toLoadMoreLog">
									<y-time-line color="rgba(2, 195, 255, 1)">
										<y-time-line-item v-for="(item,index) in pushLogDatas" :key="index"
											:showLine="pushLogDatas.length-1===index?false:true"
											style="min-height: 30px;">
											<view class="textRight">
												[{{pushTypeFilter(item.pushMethod)["name"]}}] {{item.userName}} -
												{{item.phone}}
												<span v-if="item.pushResult === 0" style="padding-left: 20px;color:#02C3FF;"
													class="timeline-item-lt textRight">
													{{ pushTypeFilter(item.pushMethod)["result"] }}
												</span>
												<span v-else-if="item.pushResult === 1"
													class="textRight"
													style="color: #f84242; padding-left: 20px">
													{{ pushTypeFilter(item.pushMethod)["error"] }}
												</span>
												<span v-else style="padding-left: 20px;color:#02C3FF;"
													class="timeline-item-lt textRight">已推送</span>
											</view>
										</y-time-line-item>
									</y-time-line>
								</scroll-view>
							</template>
							<template v-else>
								<div class="no-record">
									<image src="../../static/img/no-alarm.png" alt="">
										<span>暂无推送记录</span>
								</div>
							</template>
						</div>

					</div>
					<!-- 报警记录板块 -->
					<div class="video-alarm-record">
						<!-- 记录头部 -->
						<div class="record-top">
							<div class="record-left pointer" @click="toCheckOrder">
								<span class="text">排序</span>
								<template>
									<image src="../../static/img/bottom-arrow.png" mode="" v-if="timeListPage.order===0"
										></image>
									<image src="../../static/img/top-arrow.png" mode="" v-else>
									</image>
								</template>
							</div>
							<div class="record-right">
								<span>总持续时间:</span>
								<span>{{alarmTotalTime}}</span>
							</div>
						</div>
						<!-- 记录列表 -->
						<scroll-view scroll-y="true" @scrolltolower="toLoadMoreTime" style="height: 500px;"
							show-scrollbar="false">
							<div class="alarm-record-list">
								<y-time-line color="rgba(2, 195, 255, 1)">
									<y-time-line-item v-for="(item,index) in videoTimeLists" :key="index"
										:showLine="videoTimeLists.length-1===index?false:true"
										style="min-height: 30px;">
										<view style="color: #fff;">
											<div class="list">
												<div class="list-left">
													<div class="left-title">{{item.alarmStatusName}}</div>
													<div class="time">{{item.createTime}}</div>
													<div class="total-time">用时: {{item.alarmTime}}</div>
												</div>
												<div class="list-right" v-if="item.picUrl">
													<img :src="BaseUrl+'/admin/sys-file/' + item.picUrl" alt="">
												</div>
											</div>
										</view>
									</y-time-line-item>
								</y-time-line>
							</div>
						</scroll-view>
					</div>
				</div>
			</div>
			<!-- 关闭按钮 -->
			<image src="../../static/img/close.png" mode="" class="close-png pointer" @tap="closeModel"></image>
			<alarm-handling :show.sync="alarmhandleShow" :messageId="currentVideoSelect" :handleType="handleType" :videoOrDevice="true" @closeAlarmHandling="closeAlarmHandling">
			</alarm-handling>

			<!-- <RemoteControl :show.sync="isShowRemoteControl" :deviceId="currentDeviceId" :deptId="currentDeptId"
				></RemoteControl> -->
		</div>
		<build-detail v-if="buildShow" @isBuildShow='isBuildShow' :deptId='currentVideoObj.deptId'
			:buildId='currentVideoObj.buildId'></build-detail>
	</div>
</template>

<script>
	import videoApi from "../../api/video-api.js"
	import EZUIKit from 'ezuikit-js';
	import ChimeePlayer from 'chimee-player';
	import AlarmHandling from "@/component/dealog/AlarmHandling.vue"
	import RemoteControl from "@/component/dealog/RemoteControl.vue"
	import BuildDetail from "@/component/model/bulidDetail.vue"
	var player = null
	export default {
		components: {
			AlarmHandling,
			RemoteControl,
			BuildDetail
		},
		data() {
			return {
				videoLists: [],
				currentVideoSelect: '',
				pushLogDatas: [],
				videoTimeLists: [],
				currentVideoObj: {},
				BaseUrl: uni.getStorageSync('urlText'),
				videoPlatForm: 1,
				timeListPage: {
					pageSize: 5,
					pageNum: 1,
					total: 0,
					order: 0 //排序方式

				},
				logListPage: {
					pageSize: 6,
					pageNum: 1,
					total: 20,
				},
				alarmTotalTime: '',
				videoPng: require("../../static/luxiang.png"),
				sperkPng: require("../../static/duijiang.png"),
				handleType: "2",
				handleId: "",
				alarmhandleShow: false,
				isShowRemoteControl: false,
				isRec:false,
				istalk:false,
				buildShow:false


			}
		},
		props: {
			isSpeaker: {
				default: false
			}
		},
		created() {
			//获取当前报警的视频列表
			this.requestVideoAlarmList()

		},
		mounted() {
			// this.computedVideoType()
		},
		methods: {
			openVoice() {
				if (this.videoLists.length > 0) {
					//打开声音
					this.$emit("update:isSpeaker", true);
					//暂停之前的播放
					getApp().globalData.innerAudioContext.stop()
					getApp().globalData.innerAudioContext.play()
				} else {
					uni.showToast({
						title: '当前无报警记录!',
						duration: 1500,
						icon: 'none'
					});
					this.closeVoice();
				}
			},
			closeVoice() {
				//关闭声音
				this.$emit("update:isSpeaker", false);
				getApp().globalData.innerAudioContext.stop()
			},
			//开启录屏方案
			videocapture() {
				if (player) {
					this.isRec=!this.isRec
					if (this.isRec) {
						this.videoPng = require("../../static/luxiang2.png");
						player.startSave();
					} else {
						this.videoPng = require("../../static/luxiang.png");
						player.stopSave();
					}
				} else {
					this.$notify({
						title: "提示",
						message: "当前视频设备不支持录像",
						type: "warning",
						customClass: "warning"
					});
				}
			},
			//开启语音方案
			callcapture() {
				//语音方案
				if (player) {
					console.log(player, 2222);
					this.istalk = !this.istalk;
					if (this.istalk) {
						// this.sperkPng=require("../../")
						this.sperkPng = require("../../static/duijiang2.png");

						console.trace();
						player.startTalk();
					} else {
						this.sperkPng = require("../../static/duijiang.png");
						player.stopTalk();
					}
				} else {
					this.$notify({
						title: "提示",
						message: "当前视频设备不支持对讲",
						type: "warning",
						customClass: "warning"
					});
				}
			},
			//开启截图方案
			imgcapture() {
				//截图方案
				console.log(player, 1111);
				if (player) {
					player.capturePicture();
				} else {
					this.$notify({
						title: "提示",
						message: "当前视频设备不支持截图",
						type: "warning",
						customClass: "warning"
					});
				}
			},
			//开启手动控制
			startCtrl(dir) {
				console.log("开始了");
				videoApi.handleVideo({
					videoId: this.currentVideoObj.videoId,
					direction: dir,
					speed: 1,
					isDept:0
				}).then((res) => {
					console.log(res);
				});
			},
			stopCtrl(dir) {
				console.log("结束了");
				//停止操控
				videoApi.stophandleVideo({
					videoId: this.currentVideoObj.videoId,
					direction: dir,
					speed: 1,
					isDept:0
				}).then((res) => {
					console.log(res);
				});
			},
			closeModel() {
				//关闭故障弹窗
				this.$emit('closeVideoModel', false)
			},
			//选择报警视频
			toSelectVideo(id) {
        this.timeListPage.pageNum=1
				this.videoTimeLists = []
				this.pushLogDatas = []
				this.currentVideoSelect = id + ''

				this.requestSelectAlarmVideo()
				// this.requestVideoAlarmTimeList()
			},
			//获取视频报警列表
			async requestVideoAlarmList() {
				const userObj = JSON.parse(uni.getStorageSync('user'))
				let res = await videoApi.getVideoAlarmList({
					pageNum: 1,
					pageSize: 10,
					deptId: userObj.userDeptId,
					status: 0
				})
				this.videoLists = res.data.list
				if (this.videoLists.length) {
					this.currentVideoSelect = res.data.list[0].videoAlarmLogId + ''
					this.requestSelectAlarmVideo()
				}


			},

			//获取推送记录
			async requestPushLogs() {
				const userObj = JSON.parse(uni.getStorageSync('user'))
				let res = await videoApi.getVideoAlarmPushLog({
					deviceId: this.currentVideoObj.videoId,
					createTime: this.currentVideoObj.createTime,
					type: 1,
					pageNum: this.logListPage.pageNum,
					pageSize: this.logListPage.pageSize,
					deptId: userObj.userDeptId
				})
				this.pushLogDatas = [...this.pushLogDatas, ...res.data.list]
				this.logListPage.total = res.data.total
			},
			//计算当前推送方式
			pushTypeFilter(type) {
				if (type === 1) {
					return {
						name: "App",
						result: "已推送",
						error: "推送失败"
					};
				} else if (type === 2) {
					return {
						name: "短信",
						result: "已发送",
						error: "发送失败"
					};
				} else if (type === 3) {
					return {
						name: "电话",
						result: "已拨通",
						error: "未拨通"
					};
				} else {
					return {
						name: "播报",
						result: "已推送",
						error: "推送失败"
					};
				}
			},
			//获取视频报警线
			async requestVideoAlarmTimeList() {
				let res = await videoApi.getVideoAlarmTimeList({
					pageNum: this.timeListPage.pageNum,
					pageSize: this.timeListPage.pageSize,
					order: this.timeListPage.order,
					videoAlarmLogId: this.currentVideoSelect,
					lastAlarmTime: ''
				})
				res.data.videoAlarmPicResPageInfo.list.forEach(v=>{
					v.alarmTime=this.formatTimer(v.alarmTime)
				})
				console.log(res.data.alarmTotalTime, '数据时间')
				this.alarmTotalTime = this.formatTime(res.data.alarmTotalTime);
                // this.videoTimeLists=[]
				this.videoTimeLists = [...this.videoTimeLists, ...res.data.videoAlarmPicResPageInfo.list]
				this.timeListPage.total = res.data.videoAlarmPicResPageInfo.total

			},
			//初始化萤石云的视屏
			initVideoHls(data) {
				player = null
				var el = document.getElementById('video-container')
				el.innerHTML = ''
				console.log(el.offsetWidth)
				player = new EZUIKit.EZUIKitPlayer({
					id: 'video-container', // 视频容器ID
					accessToken: data.token,
					url: data.url,
					template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
					// 视频上方头部控件
					// header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
					// footer: ["talk", "broadcast", "hd", "fullScreen"],
					// height: 550,
					width:el.offsetWidth,
					controls: true
				})
			},
			//普通视屏容器
			initVideo(data) {
				player = null
				var el = document.getElementById('video-container1')
				console.log(el)
				el.innerHTML = ''
				player = new ChimeePlayer({
					wrapper: '#video-container1', // video dom容器
					src: data.url,
					box: data.url && data.url.slice(-3) === 'flv' ? 'flv' : 'hls',
					isLive: true,
					playsInline: true,
					autoplay: true,
					// controls: true
				})
			},
			//报警时间列表加载更多
			toLoadMoreTime(e) {
				console.log(e)
				if (e) {
					if (this.videoTimeLists.length < this.timeListPage.total) {
						this.timeListPage.pageNum++
						this.requestVideoAlarmTimeList()
					}
				}
			},
			// 处理时间
			formatTime(s) {
				// console.log(s,'时间')
				if (s === 0) {
					return '00:00:00'
				} else {
					let day = Math.floor(s / (24 * 3600));
					let hour = Math.floor((s - day * 24 * 3600) / 3600);
					let minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60);
					let second = s - day * 24 * 3600 - hour * 3600 - minute * 60;
					return `${
			        hour > 0 ? hour : "00"
			      }:${minute}:${second}`;
				}
			},
			formatTimer(s) {
				// console.log(s,'时间')
				if (s === 0) {
					return '0秒'
				} else {
					let day = Math.floor(s / (24 * 3600));
					let hour = Math.floor((s - day * 24 * 3600) / 3600);
					let minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60);
					let second = s - day * 24 * 3600 - hour * 3600 - minute * 60;
					return `${
			        hour > 0 ? hour+'时' : ""
			      }${minute+'分'}${second+'秒'}`;
				}
			},
			//日志推送加载更多
			toLoadMoreLog(e) {
				console.log(e, this.pushLogDatas.length, this.logListPage.total)
				if (e) {
					if (this.pushLogDatas.length < this.logListPage.total) {
						this.logListPage.pageNum++
						this.requestPushLogs()
					}
				}
			},
			//封装每次点击不同的视频报警的时候,
			async requestSelectAlarmVideo() {
				console.log(this.currentVideoSelect)
				console.log(player)

				//清空之前的播放器
				let el=null
				if (this.videoPlatForm === 1 || this.videoPlatForm === 4) {
					if(player){
						player.stop()
					}
					el = document.getElementById('video-container')
				} else {
					if(player){
						player.stopLoad()
					}
					el = document.getElementById('video-container1')
				}
				el.innerHTML = ''
				player=null


				//通过视频报警logid获取详情
				let res1 = await videoApi.getVideoAlarmDetail({
					videoAlarmLogId: this.currentVideoSelect
				})
				this.currentVideoObj = res1.data
				let self=this
				this.$nextTick(() => {
					let img = new Image()
					img.src = uni.getStorageSync('urlText') + '/admin/sys-file/' + self.currentVideoObj.image
					// BaseUrl+
					let imgWidth=0
					let imgHeight=0
					img.onload = ()=>{
						imgWidth=img.width
						imgHeight=img.height

						let modelWidth = self.$refs.model.offsetWidth
						let modelHeight = self.$refs.model.offsetHeight
						let widRate=(modelWidth/imgWidth).toFixed(2)
						let heRate=(modelHeight/imgHeight).toFixed(2)
						if (self.currentVideoObj.mark && self.currentVideoObj.mark != '') {
							this.currentVideoObj.mark = this.currentVideoObj.mark.split(",")
							self.currentVideoObj.mark[0]=self.currentVideoObj.mark[0]*heRate-16
							self.currentVideoObj.mark[1]=self.currentVideoObj.mark[1]*widRate-16

						} else {
							self.currentVideoObj.mark=[]
							self.currentVideoObj.mark[0]=modelHeight/2-16
							self.currentVideoObj.mark[1]=modelWidth/2-16

						}
					}
				})
				//通过视频详请的videoid获取视频url
				let res2 = await videoApi.getTalkVideo({
					videoId: res1.data.videoId
				})
				//不是萤石云接口getLiveUrlById
				if (res2 && res2.data) {
					console.log(res2.data)
					this.videoPlatForm = res2.data.platformType
					this.$nextTick(function(){
						if (res2.data.platformType === 1) {
							this.initVideoHls(res2.data)
						} else {
							this.initVideo(res2.data)
						}
					})
				}
				this.requestPushLogs()
        this.timeListPage.pageNum=1
        this.videoTimeLists=[]
				this.requestVideoAlarmTimeList()
			},
			//点击切换当前时间线的排序方式
			toCheckOrder() {
        this.timeListPage.pageNum=1
				this.videoTimeLists = []
				if (this.timeListPage.order === 0) {
					this.timeListPage.order = 1
					this.requestVideoAlarmTimeList()
				} else {
					this.timeListPage.order = 0
					this.requestVideoAlarmTimeList()
				}
			},
			//打开处理误报弹窗
			// toDeal(id) {

			// 	if (id === 2) {
			// 		this.alarmhandleShow = true
			// 	} else if (id === 3) {
			// 		this.isShowRemoteControl = true
			// 	}
			// },
			toDealrError() {
				this.alarmhandleShow = true
			},
			toRemoteControl() {
				this.isShowRemoteControl = true
			},
			toNewBuildDetail(){
				this.buildShow=true
			},
			isBuildShow(val){
				this.buildShow=val
			},
			closeAlarmHandling(){
				this.requestVideoAlarmList()
			}


		},
		beforeDestroy() {
			console.log('abaaaa')
			console.log(player)
			if (this.videoPlatForm === 1 || this.videoPlatForm === 4) {
				// if(player){
				// 	player.stop()
				// }
			} else {
				if(player){
					player.stopLoad()
				}
			}
			player=null
		}
	}
</script>

<style lang="scss" scoped>
	.video-model {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2000;
		overflow-y: auto;

		.model-content {
			position: absolute;
			left: 50%;
			top: 5%;
			transform: translate(-50%, 0);
			width: 90%;
			height: 920px;
			background: #01192E;
			z-index: 3;

			.content-top {
				height: 70px;
				display: flex;
				justify-content: center;

				.top {
					display: flex;
					align-items: center;
				}

				.light-img {
					width: 29px;
					height: 31px;
				}

				.top-title {
					color: #02C3FF;
					font-size: 18px;
					margin-right: 6px;
				}

				.sound {
					width: 46px;
					height: 20px;
					background-color: #02C3FF;
					line-height: 20px;
					cursor: pointer;

					image {
						margin-left: 3px;
						width: 13px;
						height: 12px;

					}

					.sound-text {
						color: #fff;
						font-size: 12px;
					}
				}
			}

			.content-top::after {
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				top: 60px;
				opacity: 0.1;
				border: 1px solid #1ACFFF;
			}

			// 弹框主体内容
			.dialog-main {
				display: flex;

				.dialog-left {
					width: 22%;

					margin: 0 20px;
					height: 400px;

					.abnormal-record {
						//异常记录头部板块

						.record-top {
							padding: 10px 0;
							display: flex;
							align-items: center;
							border-bottom: 1px solid rgba(61, 230, 255, 0.3);

							.top-logo {
								   width: 7px;
								    height: 16px;
								vertical-align: middle;
								margin-right: 6px;
							}

							.top-text {
								font-size: 16px;
								color: #fff;
							}
						}

						.record-list {
							margin-top: 10px;
							height: 466px;
							background: linear-gradient(180deg, rgba(2, 24, 37, 0) 0%, #011425 100%);

							.list-item {
								margin: 0 10px;
								border-bottom: 1px solid;
								border-image: linear-gradient(135deg, rgba(58, 233, 255, 0.1), rgba(2, 195, 255, 0.1)) 1 1;
								padding: 10px 10px 0px 10px;

								.item-top {
									display: flex;
									justify-content: space-between;
									color: rgba(255, 255, 255, 0.7);

									.top-left {
										display: flex;
										align-items: center;
									}

									.top-right {
										color: rgba(255, 255, 255, 0.4000);
										font-size: 12px;
									}

									.circle {
										width: 10px;
										height: 10px;
										border: 1px solid #fff;
										border-radius: 10px;
										margin-right: 10px;
									}
								}

								.item-bottom {
									display: flex;
									justify-content: space-between;
									color: rgba(255, 255, 255, 0.7000);
									font-size: 14px;
									padding: 10px 0px 10px 20px;

									.bottom-left {}

									.bottom-right {
										padding: 1px 7px;
										font-size:12px;
										background-color: #FF3D3D;
										display: flex;
										justify-content: center;
										align-items: center;
										border-radius: 20px;
									}
								}

							}

							.active {
								background: linear-gradient(180deg, rgba(27, 169, 255, 0.28) 0%, rgba(0, 70, 120, 0.14) 100%);

								.item-top {
									.top-left {
										.circle {
											background-color: #02C3FF;
											border: none;
										}

										.name {
											color: #02C3FF;
										}
									}
								}
							}
						}
					}

					// 平面图板块
					.plane-figure {

						.figure-model {
							position: relative;
							margin-top: 10px;
							background-color: #011425;
							height: 260px;
							text-align: center;

							img {
								width: 90%;
								height: 230px;
							}

							.model-address {
								display: flex;
								align-items: center;
								justify-content: center;




								img {
									width: 20px;
									height: 20px;
								}

								span {
									color: #fff;
								}
							}

							.no-image {
								height: 100%;
								display: flex;
								justify-content: center;
								align-items: center;
								color: rgba(255, 255, 255, .7);
								font-size: 16px;
								height: 260px;
								background: #011425;
								opacity: 0.8;
								flex-direction: column;

								uni-image {
									width: 132px;
									height: 97px;
								}
							}

						}

						.alarm-marker {
							position: absolute;
							width: 32px;
							height: 32px;
							background: url(../../static/img/floor-device-alarm.png) no-repeat;
							justify-content: center;
							display: flex;
							align-items: center;

							image {
								width: 24px;
								height: 24px;
							}
						}
					}
				}

				.dialog-middle {
					width: 50%;

					// 建筑详情板块
					.build-detail {
						padding: 10px 20px;
						background: rgba(0, 62, 112, 0.2);
						position: relative;

						.build-name {
							font-size: 22px;
							color: rgba(255, 255, 255, 0.8);
							display: flex;
							align-items: center;
							margin-bottom: 20px;

							img {
								width: 20px;
								height: 20px;
								margin-right: 10px;
							}
						}

						.build-address {
							color: rgba(255, 255, 255, 0.6);
							font-size: 14px;
							display: flex;
							align-items: center;


							img {
								margin-right: 10px;
							}
						}

						.to-detail {
							color: rgba(61, 230, 255, 1);
							position: absolute;
							right: 20px;
							top: 50%;
							transform: translateY(-50%);
						}
					}

					// 报警摄像头名称
					.montior-name {
						padding: 50px 0 0 20px;
						font-size: 16px;
						color: rgba(255, 61, 61, 1);
					}

					//视屏报警主体
					.monitor-video {
						margin-top: 20px;
						height: 670px;


						.video-top {
							width: 100%;
							display: flex;
							min-height: 550px;
							position: relative;
							.leftLoading{
								position: absolute;
								left: 0;
								top: 0;
								width: 100%;
								height: 100%;
								display: flex;
								align-items: center;
								justify-content: center;
								z-index: 0;
								.imgVideo{
									width: 83px;
									height: 83px;
									animation:leftLoading linear 3s infinite;
								}
							}
							@keyframes leftLoading {
								0% {
									transform: rotateZ(0deg);
								}
								100% {
									transform: rotateZ(360deg);
								}
							}
							//普通视频
							.video-container1{
								width: 100%;
							}
							//萤石云视频
							.content-left {
								flex: 7;
								display: flex;
								justify-content: center;

								.video-container {
									width: 100%;
									height: 550px;
								}
							}

							// .active {
							// 	width: 100%;
							// }

							.content-right {
								flex: 3;
								// width: 30%;
								display: flex;
								flex-direction: column;
								align-items: center;

								.right-title {
									color: #fff;
									font-size: 16px;
									padding-top: 75px;
									text-align: center;
								}

								.right-contorll {
									margin: 50px 40px 0 40px;
									background-color: rgba(0, 62, 112, 0.2);
									width: 180px;
									height: 180px;
									border-radius: 180px;
									display: flex;
									align-items: center;
									justify-content: center;
									position: relative;

									.small-contorll {
										width: 100px;
										height: 100px;
										border-radius: 100px;
										background: rgba(1, 24, 46, 0.7);
									}

									.contorll-button {
										img {
											width: 19px;
											height: 14px;
											position: absolute;
										}
										.other{
											width: 14px;
											height: 19px;
										}

										.top {
											top: 10px;
											left: 50%;
											transform: translate(-50%, 0);
										}

										.right {
											top: 50%;
											right: 10px;
											transform: translate(0, -50%);
										}

										.bottom {
											left: 50%;
											bottom: 10px;
											transform: translate(-50%, 0);
										}

										.left {
											left: 10px;
											top: 50%;
											transform: translate(0, -50%);
										}
									}
								}

								.right-contorll-desc {
									margin-top: 10px;
									flex-direction: column;
									color: #fff;
									font-size: 12px;
									display: flex;
									align-items: center;

									div {
										margin-bottom: 10px;
									}
								}

								.bottom-button {
									padding: 0 20px;
									width: 100%;
									display: flex;
									justify-content: space-around;
									margin-top: 20px;

									.button-all {
										display: flex;
										align-items: center;
										flex-direction: column;

										.item-text {
											margin-top: 5px;
											color: #fff;
											font-size: 12px;
										}
									}

									.button-item {
										width: 60px;
										height: 60px;
										border-radius: 127px;
										display: flex;
										align-items: center;
										justify-content: center;
										background: linear-gradient(180deg,
												rgba(52, 213, 249, 0.08) 0%,
												rgba(93, 190, 252, 0.07) 100%);

										.small-button {
											width: 40px;
											height: 40px;
											border-radius: 88px;
											display: flex;
											justify-content: center;
											align-items: center;
											background: rgba(52, 213, 249, 0.15);

											background-size: cover;

											image {
												width: 30px;
												height: 30px;
											}
										}
									}
								}
							}
						}


						.video-bottom {
							margin-top: 50px;
							display: flex;
							justify-content: center;

							.bottom-btns {
								color: rgba(255, 61, 61, 1);
								font-size: 14px;
								width: 50%;
								height: 36px;

								display: flex;
								justify-content: center;

								.btn-item {
									background-color: rgba(255, 61, 61, 0.2000);
									display: flex;
									justify-content: center;
									align-items: center;
									width: 120px;
									height: 36px;
									margin-right: 20px;

									image {
										width: 20px;
										height: 20px;
										margin-right: 5px;
									}
								}

								.yellow {
									background-color: rgba(254, 169, 64, 0.1);
									color: rgba(254, 169, 64, 1);
									border: 1px solid #FEA940;
								}

								.blue {
									background-color: rgba(51, 193, 216, 0.1000);
									color: rgba(51, 193, 216, 1);
									border: 1px solid #02C3FF;
								}
							}
						}

					}
				}

				.dialog-right {
					width: 22%;
					margin: 0 20px;

					.push-record-list {
						padding: 10px 10px;
						margin-top: 10px;
						height: 160px;
						background-color: #011425;
						.textRight{
							color: rgba(255, 255, 255, 0.7);
							font-family: 'PingFangSC-Regular';
						}

						.no-record {
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 16px;
							flex-direction: column;
							color: rgba(255, 255, 255, .7);
							background: #011425;
							opacity: 0.8;

							uni-image {
								width: 132px;
								height: 97px;
							}
						}
					}

					.video-alarm-record {
						background-color: #011425;
						margin-top: 20px;
						height: 600px;

						color: #fff;

						.record-top {
							display: flex;
							justify-content: space-between;
							color: #02C3FF;
							padding: 21px 12px;

							.record-left {

								image {
									margin-left: 10px;
									width: 11px;
									height: 6px;
								}
							}
						}

						.alarm-record-list {
							.list {
								display: flex;
								margin-bottom: 30px;
							}

							.list-left {
								flex: 4;
								font-family: 'PingFangSC-Regular';
								line-height: 24px;
								margin-top: -5px;
								.left-title{
									font-family: 'PingFangSC-Medium';
								}
								.time{
									font-size: 12px;
									color: rgba(255, 255, 255, 0.7);
								}
								.total-time{
									font-size: 12px;
									color: rgba(255, 255, 255, 0.7);
								}
							}

							.list-right {
								margin-left: 20px;
								flex: 6;
								height: 115px;

								img {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
			}

			//关闭按钮
			.close-png {
				position: absolute;
				width: 17px;
				height: 19px;
				right: 20px;
				top: 19px;
			}
		}
	}
	//更改时间线样式
	::v-deep .base-time-line-item .dot{
		width: 9px;
		height: 9px;
	}
	::v-deep .base-time-line-item .line{
		top: 5px;
	}
</style>
